<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>画板</title>
    <meta charset="UTF-8">
    <script src="/static/bflow/assets/js/scriptLib.js"></script>
    <!-- highlight --->
    <link rel="stylesheet" href="/static/bflow/assets/components/gojs/extensions/highlight.css">
    <script src="/static/bflow/assets/components/gojs/extensions/highlight.js"></script>
    <link rel="stylesheet" href="/static/bflow/assets/components/gojs/css/main.css">
    <!-- GoJS -->
    <script src="/static/bflow/assets/components/gojs/go.js"></script>
    <script src="/static/bflow/assets/components/gojs/goUtil.js"></script>
    <script src="/static/bflow/assets/components/gojs/extensions/BalloonLink.js"></script>
    <!-- bootstrap-validator -->
    <script src="https://cdn.bootcss.com/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
    <script>

        $(function () {
            // 表单验证 http://1000hz.github.io/bootstrap-validator/
            $('#inputForm').validator().on('submit', function (e) {
                if (e.isDefaultPrevented()) {
                    // handle the invalid form...
                } else {
                    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
                    //防止重复提交
                    FormUtil.blockRepeatSubmit($('#inputForm'), 2000);
                    var paramArr = $("#inputForm").serialize();
                    $.post("/bflow/draw/save", paramArr, function(data) {
                        data=JSON.parse(data);
                        dialogTipSuccess(data.message);
                        refreshPage(1000, '/static/bflow/ui/drawBoard/drawView.html?instansceId='+getBrowserQueryVar("procId"));
                    })
                }
                return false;
            })

            $("#save").click(function () {
                $("#inputForm").submit();
            })

        })

        function init() {
            var $ = go.GraphObject.make;  // for conciseness in defining templates
            // api : https://gojs.net/beta/api/symbols/Diagram.html
            myDiagram =
                $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
                    {
                        initialContentAlignment: go.Spot.Center,
//                              fixedBounds: new go.Rect(0, 0, 500, 500),  // document is always 600x500 units
                        allowHorizontalScroll: false,  // disallow scrolling or panning
                        allowVerticalScroll: false,
                        allowZoom: false,              // disallow zooming
                        allowClipboard: false,
                        allowCopy: false,
                        allowDrop: false,
                        allowDelete: false,
                        allowLink: false,
                        allowTextEdit: true, //可编辑（总开关）
                        allowMove: true, //允许移动
                        "toolManager.hoverDelay": 200,
                        // have mouse wheel events zoom in and out instead of scroll up and down
                        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
                        // enable undo & redo
                        "undoManager.isEnabled": false, //撤回功能
                        "ModelChanged": function(e) {     // just for demonstration purposes,
                            if (e.isTransactionFinished) {  // show the model data in the page's TextArea
                                document.getElementById("mySavedModel").value = e.model.toJson();
                            }
                        }
                    });
            initDiagram(myDiagram, false);
            loadData();
        }

        function loadData() {
            var instansceId = getBrowserQueryVar("instansceId");
            $("#instansceId").val(instansceId);
            $.post("/bflow/draw/getByInstancesId", {id: instansceId}, function(data){
                console.log("data",data);
                data=$.parseJSON(data);
                if(data.statusCode=="200"){
                    if(CommUtil.isNotEmpty(data.data.draw)){
                        FormUtil.bindFormData("inputForm", data.data.draw);
                        $("#stringId").val(data.data.draw.stringId+"");
                    }
                    myDiagram.model = go.Model.fromJson(data.data);
                    $("#mySavedModel").val(JSON.stringify(data.data));
                }else{
                    dialogTipSuccess(data.message);
                }
            });
        }

    </script>
</head>
<body onload="init()">
<div id="sample" class="col-sm-5 col-sm-offset-3">
    <div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 400px"></div>

    <div>
        <div class="row" style="padding: 25px">
            <div class="ibox-content col-sm-12 ">
                <form id="inputForm"  class="form-horizontal m-t"  novalidate="novalidate">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">说明：</label>
                        <div class="col-sm-8">
                            <input id="title" name="title" minlength="2" placeholder="请输入流程图说明" required type="text" class="form-control" required readonly >

                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-3">
                            <!--<a class="btn btn-primary" id="save">保存画板</a>-->

                            <a class="btn btn-primary" href="##"  onClick="javascript :history.back(-1)" >返回</a>
                        </div>
                    </div>
                    <textarea id="mySavedModel"  name="json" style="width:100%;height:300px;display: none"></textarea>
                    <input type="hidden" id="stringId" name="id" />
                    <input type="hidden" id="key" name="drawKey" />
                    <input type="hidden" id="procId" name="procId" />
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
